<template>
  <el-container class="center-container">
    <el-header>
      <div class="header-main">
        <div class="header-left">
          <img src="/img/user-center-images/logo.svg" alt="logo" @click="$router.push('/user-center')" />
        </div>
        <el-menu :default-active="$route.matched[1].path" mode="horizontal" router>
<!--          <el-menu-item class="search-btn">-->
<!--            <i class="el-icon-search"></i>-->
<!--          </el-menu-item>-->
          <el-menu-item index="/user-center/user-notice">
            <el-dropdown>
              <el-badge is-dot>
                <i class="el-icon-bell"></i>
              </el-badge>
            </el-dropdown>
          </el-menu-item>
          <el-divider direction="vertical"></el-divider>
          <el-dropdown trigger="click" class="profile-photo-box">
            <div class="profile-photo">
              <el-avatar src=""></el-avatar>
              JQZ KEJI
            </div>
            <template #dropdown>
              <el-dropdown-menu class="setting-popup">
                <div class="version-details-box">
                  <div class="version-details-header">
                    <img src="/img/user-center-images/enterprise_version.png" alt="enterprise">
                    <span class="warning-text">企业版</span>
                  </div>
                  <div class="expire-date secondary-text">2021年6月25日到期</div>
                </div>
                <el-dropdown-item icon="el-icon-setting" @click="$router.push('/user-center/user-account/user-setting')">
                  账号设置
                </el-dropdown-item>
                <hr>
                <el-dropdown-item icon="el-icon-document">
                  更新日志
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-help">
                  帮助中心
                </el-dropdown-item>
                <hr>
                <el-dropdown-item icon="el-icon-house">
                  返回网站首页
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-menu-item index="/user-center/logout">
            <i class="el-icon-switch-button"></i>
          </el-menu-item>
        </el-menu>
      </div>
    </el-header>
    <el-container v-if="$route.matched[1].path !== '/user-center/user-account'">
      <el-aside width="220px">
        <div class="center-aside-header">
          <div class="version-logo">
            <img src="/img/user-center-images/enterprise_version.png" alt="enterprise">
            <span class="warning-text">企业版</span>
          </div>
          <p class="secondary-text">距离到期：60天</p>
        </div>
        <el-menu unique-opened :default-active="$route.matched[1].path" router>
          <el-menu-item class="menu-item-gap" index="/user-center/user-index">
            <template #title>
              <img :src="imgRootSrc+'my_index_active_icon.png'" alt="my_index_active_icon" v-show="$route.name?.split('.')[0]==='userIndex'">
              <img :src="imgRootSrc+'my_index_icon.png'" alt="my_index_icon" v-show="!($route.name?.split('.')[0]==='userIndex')">
              首页
            </template>
          </el-menu-item>
          <el-submenu index="1">
            <template #title>
              <img :src="imgRootSrc+'my_short_link_active_icon.png'" alt="my_short_link_active_icon" v-show="$route.name?.split('.')[0]==='shortLink'">
              <img :src="imgRootSrc+'my_short_link_icon.png'" alt="my_short_link_icon" v-show="!($route.name?.split('.')[0]==='shortLink')">
              我的短链
            </template>
            <el-menu-item-group>
              <el-menu-item index="/user-center/short-link-manage">短链管理</el-menu-item>
              <el-menu-item index="/user-center/short-domain">短链域名</el-menu-item>
              <el-menu-item index="/user-center/short-statistics">数据统计</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template #title>
              <img :src="imgRootSrc+'my_live_code_active_icon.png'" alt="my_live_code_active_icon" v-show="$route.name?.split('.')[0]==='liveCode'">
              <img :src="imgRootSrc+'my_live_code_icon.png'" alt="my_live_code_icon" v-show="!($route.name?.split('.')[0]==='liveCode')">
              我的活码
            </template>
            <el-menu-item-group>
              <el-menu-item index="/user-center/live-code">活码管理</el-menu-item>
              <el-menu-item index="/user-center/live-code-domain">活码域名</el-menu-item>
              <el-menu-item index="/user-center/live-code-statistics">数据统计</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template #title>
              <img :src="imgRootSrc+'monitor_active_icon.png'" alt="monitor_active_icon" v-show="$route.name?.split('.')[0]==='remind'">
              <img :src="imgRootSrc+'monitor_icon.png'" alt="monitor_icon" v-show="!($route.name?.split('.')[0]==='remind')">
              检测和监控
            </template>
            <el-menu-item-group>
              <el-menu-item index="/user-center/domain-detection">域名检测</el-menu-item>
              <el-menu-item index="/user-center/monitor-system">状态监控</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template #title>
              <img :src="imgRootSrc+'QR_active.png'" alt="QR_active" v-show="$route.name?.split('.')[0]==='synchysisCode'">
              <img :src="imgRootSrc+'QRcode.png'" alt="QRcode" v-show="!($route.name?.split('.')[0]==='synchysisCode')">
              旧版活码
            </template>
            <el-menu-item-group>
              <el-menu-item index="/user-center/old-code">混排码</el-menu-item>
              <el-menu-item index="/user-center/old-code-domain">旧码域名</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item class="menu-item-gap buy-program" @click="openNewPage">
            <template #title>
              <img :src="imgRootSrc+'shop.png'" alt="shop_icon">
              购买程序
            </template>
          </el-menu-item>
          <el-submenu index="5">
            <template #title>
              <img :src="imgRootSrc+'recycle_bin_active_icon.png'" alt="recycle_bin_active_icon" v-show="$route.name?.split('.')[0]==='recyleBin'">
              <img :src="imgRootSrc+'recycle_bin_icon.png'" alt="recycle_bin_icon" v-show="!($route.name?.split('.')[0]==='recyleBin')">
              回收站
            </template>
            <el-menu-item-group>
              <el-menu-item index="/user-center/recyle-bin-short">短链</el-menu-item>
              <el-menu-item index="/user-center/recyle-bin-live-code">活码</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
    <router-view v-else></router-view>
  </el-container>
</template>

<script setup>
const imgRootSrc = '/img/user-center-images/'
const openNewPage = ()=> window.open('https://www.baidu.com')
</script>

<style lang="less" scoped>
.center-container {
  width: 100%;
  box-sizing: border-box;
  min-width: 1140px;
  height: 100vh;
  overflow: hidden;
  .el-header {
    padding: 0;
    background-color: #FFFFFF;
    color: #707070;
    display: flex;
    align-items: center;
    width: 100%;

    .header-main {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-left {
        width: 220px;
        max-width: 220px;
        text-align: center;
        img{
          width: 130px;
          cursor: pointer;
        }
        .el-select {
          max-width: 126px;
          min-width: 88px;

          &:deep(.select-trigger){
            .el-input {
              .el-input__inner {
                text-align: center;
              }
            }
          }
        }
      }

      .el-input {
        max-width: 700px;
      }

      .el-menu {
        display: flex;
        align-items: center;

        .search-btn {
          border-bottom: none;
          color: #909399!important;
        }

        .profile-photo-box{
          .profile-photo{
            display: flex;
            align-items: center;
            cursor: pointer;
            margin: 0 64px 0 56px;
            user-select: none;
            .el-avatar {
              width: 30px;
              height: 30px;
              cursor: pointer;
              margin-right: 5px;
            }
          }
        }
        .el-menu-item {
          padding: 0 5px;
          margin-right: 40px;
          i{
            font-size: 22px;
          }
          .el-submenu__title {
            padding: 0;
          }

          &:deep(.el-badge){
            display: flex;
            align-items: center;

            .el-badge__content {
              width: 5px;
              height: 5px;
              right: 12px;
              top: 3px;
            }
          }
        }
        .el-avatar {
          width: 30px;
          height: 30px;
          cursor: pointer;
        }
      }
    }
  }
  .el-container{
    background-color: #FFFFFF;
    height: calc(100vh - 60px);
    .el-aside {
      display: flex;
      flex-direction: column;
      background-color: #FFFFFF;
      transition: width 0.3s ease-in;
      box-sizing: border-box;
      .center-aside-header{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 23px 0 30px 0;
        .version-logo{
          width: 120px;
          height: 32px;
          border-radius: 4px;
          border: 1px solid @border-info;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          font-weight: 500;
          img{
            width: 20px;
            height: 16px;
            margin-right: 12px;
          }
        }
        p{
          font-size: 12px;
          font-weight: 400;
        }
      }
      .el-menu {
        flex: 1;
        overflow-y:auto;
        background-color: #FFFFFF;
        .el-submenu{
          &:deep(.el-submenu__title){
            height: 60px;
            color: @subtitle;
            padding-left: 34px!important;
            display: flex;
            align-items: center;
            user-select: none;
            img{
              margin-right: 16px;
            }
          }
          .el-menu-item{
            color: @secondary;
            background-color: #FFFFFF;
            padding-left: 72px!important;
            border-left: 5px solid transparent;
            &:hover{
              //border-left-color: rgb(154,133,214);
              background-color: #ecf5ff;
            }
          }
        }
        .el-menu-item{
          user-select: none;
        }
        &:deep(.el-submenu.is-active){
          background-color: @primary;
          .el-submenu__title{
            color: #FFFFFF;
            i{
              color: #FFFFFF;
            }
            &:hover{
              background-color: unset;
            }
          }
        }
        .menu-item-gap{
          padding-left: 34px!important;
          img{
            margin-right: 16px;
          }

          a{
            color:#484a4d;
            text-decoration: none;
          }
        }
        .menu-item-gap.is-active{
          background-color: @primary;
          color: #FFFFFF!important;
          i{
            color: #FFFFFF;
          }
        }
        .el-submenu [class^=el-icon-],.el-menu-item [class^=el-icon-]{
          margin-right: 16px;
          font-size: 22px;
          color: @subtitle;
        }
        .buy-program{
          color: @subtitle!important;
        }
        .buy-program.is-active{
          background-color: #FFFFFF;
          color: @subtitle!important;
        }
      }
    }
    .el-main {
      height: 100%;
      overflow: auto;
      padding: 24px;
      border-radius: 52px 0 0 0!important;
      background-color: #F3F5FA;
    }
  }
}
.el-menu-item [class^=el-icon-], .el-submenu [class^=el-icon-] {
  margin-right: 0;
}
</style>

<style lang="less">
.setting-popup{
  width: 240px;
  .version-details-box{
    width: inherit;
    background-color: @primary-plain;
    padding: 20px 32px;
    box-sizing: border-box;
    margin-bottom: 10px;
    .version-details-header{
      font-size: 16px;
      display: flex;
      align-items: center;
      img{
        margin-right: 12px;
      }
    }
    .expire-date{
      font-size: 12px;
      padding-left: 32px;
      margin-top: 8px;
    }
  }
  hr{
    margin: 8px 20px;
    background-color: #F3F5FA;
    height: 1px;
    border: none;
  }
  .el-dropdown-menu__item{
    height: 40px;
    line-height: 40px;
    padding-left: 32px;
  }
}
</style>
